<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象  e  event</title>
    <style>
        #box{
            width: 100%;
            height: 300px;
            background: rgb(19, 26, 126);
        }
    </style>
</head>
<body>
    <div id="box">


    </div>
    <script>
        // 获取事件源  e.target
        // 阻止默认行为  e.preventDefault();
        // 阻止冒泡   e.stopPropagation();
        // 获取鼠标信息 e.clientX
        // 获取键盘的按键  e.keyCode
        document.addEventListener('touchstart', function(e){
            e.preventDefault()
        }, {
            passive: false
        });

        //获取元素
        let box = document.querySelector("#box");

        box.addEventListener('touchstart', function(e){
            e.preventDefault();
            // // console.log(e.changedTouches[0].clientX);
            // // console.log(e.changedTouches[0].clientY);
            // //修改背景颜色
            // this.style.background = 'rgb(182, 38, 38)';
            // //当前元素上的触点个数
            // box.innerHTML = '元素上的触点个数: ' + e.targetTouches.length;
            // box.innerHTML += '<br />屏幕上的触点个数: ' + e.touches.length;
            // box.innerHTML += '<br />屏幕同时按下的触点个数: ' + e.changedTouches.length;
        });

        box.addEventListener('touchmove', function(e){
            //修改背景颜色
            // this.style.background = 'rgb(180, 201, 61)';
            // //当前元素上的触点个数
            // box.innerHTML = '元素上的触点个数: ' + e.targetTouches.length;
            // box.innerHTML += '<br />屏幕上的触点个数: ' + e.touches.length;
            // box.innerHTML += '<br />屏幕同时滑动的触点个数: ' + e.changedTouches.length;
        });

        box.addEventListener('touchend', function(e) {
            this.style.background = 'rgb(83, 90, 196)';

            box.innerHTML = '元素上的触点个数: ' + e.targetTouches.length;
            box.innerHTML += '<br />屏幕上的触点个数: ' + e.touches.length;
            box.innerHTML += '<br />屏幕同时抬起的触点个数: ' + e.changedTouches.length;

            console.log(e.changedTouches[0]);
        });


        //
    </script>
</body>
</html> 